import { useState } from 'react'
import { reg } from './api/reg'


const Registy = (props)=>{
    const [user,setUser] = useState({
        username: "",
        password: "",
    })
    // 赋值函数
    const changeUser = (event)=>{
        const input = event.target
        // console.log(input.name,input.value)
        setUser({...user,[input.name]:input.value})
    }
    // 提交函数
    const submit = ()=>{
        // console.log(user)
        // 前端的基础效验
        // 发起一个请求
        reg(user).then((res)=>{
            // 1. res.code 1 的话  跳转到首页，并且修改全局用户状态
            // 2. res.data 0 的话  跳转到路由页面
            // console.log(res)
            if (res.data.code) {
                props.history.replace("/login")
                alert("注册成功")
            }else{
                alert(res.data.msg || "注册失败")

            }
        })
    }
    return <div>
       用户名： <input 
        placeholder="输入用户名"
      style={{width:"300px",height:"40px",borderRadius:"20px", marginTop:"20px",marginLeft:"-3px",}} onChange={changeUser} type="text" name="username" value={user.username} /><br/>
        密码：<input 
        placeholder="输入密码"
      style={{width:"300px",height:"40px",borderRadius:"20px", marginTop:"20px",marginLeft:"18px",}}
         onChange={changeUser}  type="password" name="password"  value={user.password} /><br/>
        <button 
        style={{width:"300px",height:"40px",background:"red",color:"white",borderRadius:"20px", marginTop:"70px",marginLeft:"38px",border:"none"}}
         onClick={submit}>注册</button>

    </div>
}

export default Registy